@page
@{ Layout = "_LayoutHome"; }
@section Styles{
    <style>
        .el-form-item {
            margin-bottom: 0px;
        }
    </style>
}
<el-card>
    <el-row :gutter="18">
        <el-col :span="6">
            <el-card class="box-card pe-0">
                <div slot="header" class="clearfix">
                    <span>我的赛事</span>
                </div>
                <div class="pe-0">
                    <el-scrollbar class="scrollbar" :style="{ height: ($(window).height()-160) + 'px' }">
                        <div v-if="roomTotal>0" class="pe-3">
                            <el-card class="mb-3 card-hover-with-icon border-top border-3" v-for="room in roomList">
                                <div v-on:click="btnViewRoomClick(room)">
                                    <div class="text-center mb-3">
                                        <span class="px-3 py-1 rounded-pill fs-6 card-icon">{{ room.mark }}</span>
                                    </div>
                                    <div class="d-flex justify-content-between align-items-center">
                                        <div v-if="room.userId_A>0" class="text-center">
                                            <div class="avatar avatar-sm">
                                                <img :src="room.userA.avatarUrl || DEFAULT_AVATAR_URL" class="rounded-circle">
                                            </div>
                                            <div class="fs-6">
                                                {{ room.userA.displayName }}
                                            </div>
                                            <div class="mt-2" v-if="room.winUserId>0">
                                                <span v-if="room.winUserId===room.userId_A" class="text-success">胜</span>
                                                <span v-else class="text-danger">负</span>
                                            </div>
                                        </div>
                                        <div v-else>
                                            <div class="avatar avatar-sm">
                                                <img :src="DEFAULT_NOBODY_AVATAR_URL" class="rounded-circle">
                                            </div>
                                        </div>
                                        <div class="text-warning">
                                            <span>vs</span>
                                        </div>
                                        <div v-if="room.userId_B>0" class="text-center">
                                            <div class="avatar avatar-sm">
                                                <img :src="room.userB.avatarUrl || DEFAULT_AVATAR_URL" class="rounded-circle">
                                            </div>
                                            <div class="fs-6">
                                                {{ room.userB.displayName }}
                                            </div>
                                            <div class="mt-2" v-if="room.winUserId>0">
                                                <span v-if="room.winUserId===room.userId_B" class="text-success">胜</span>
                                                <span v-else class="text-danger">负</span>
                                            </div>
                                        </div>
                                        <div v-else>
                                            <div class="avatar avatar-sm">
                                                <img :src="DEFAULT_NOBODY_AVATAR_URL" class="rounded-circle">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="text-center mt-3">
                                        <span class="fs-6"><i class="bi bi-calendar3-event me-1 text-warning"></i> {{ room.beginDateTimeStr }}</span>
                                    </div>
                                </div>
                            </el-card>
                            <div class="my-5 text-center">
                                <el-button icon="el-icon-refresh-right" v-if="roomList.length>0 && roomList.length<roomTotal" v-on:click="btnRoomLoadMoreClick" :loading="roomLoadMoreLoading">加载更多</el-button>
                                <small v-else>没有更多了</small>
                            </div>
                        </div>
                        <div class="pt-10" v-else>
                            <el-empty :image-size="55" image="/sitefiles/assets/images/jiangbei.svg" description="暂无安排"></el-empty>
                        </div>
                    </el-scrollbar>
                </div>
            </el-card>
        </el-col>
        <el-col :span="18">
            <div class="mb-3 text-primary"><i class="bi bi-trophy-fill me-2"></i>全部赛事</div>
            <div class="p-5 bg-light">
                <el-scrollbar class="scrollbar" :style="{ height: ($(window).height()-160) + 'px' }">
                    <div class="pe-3" v-if="total>0">
                        <div class="ms-5 mb-3 position-relative card-hover-with-icon animate__animated animate__fadeInRight" v-for="(pk,index) in list" v-on:click="btnViewClick(pk.id)">
                            <div class="position-absolute top-50 start-0 translate-middle">
                                <div class="position-relative">
                                    <i class="bi bi-trophy-fill fs-2 rounded-3 px-1 card-icon text-warning"></i>
                                    <span class="position-absolute top-100 start-100 translate-middle mt-1 fs-6">{{ index+1 }}</span>
                                </div>
                            </div>
                            <el-card shadow="hover" class="mb-2">
                                <div class="row align-items-center g-3 ms-6">
                                    <div class="col">
                                        <div class="mb-3 fw-bold">
                                            <el-link :underline="false" v-on:click.stop="btnViewClick(pk.id)">
                                                {{ pk.name }}
                                            </el-link>
                                        </div>
                                        <ul class="list-inline fw-light">
                                            <li class="list-inline-item fs-5">
                                                <i class="bi bi-person me-2"></i>参赛人数：{{ pk.userTotal }}人
                                            </li>
                                            <li class="list-inline-item fs-5">
                                                <span class="rounded-3 p-2 card-icon fw-bold">
                                                    <span class="text-warning" v-if="pk.haveMe">我需要参与</span>
                                                    <span class="text-success" v-else>我不需要参与</span>
                                                </span>
                                            </li>
                                        </ul>
                                        <ul class="list-inline fw-light">
                                            <li class="list-inline-item fs-5">
                                                <i class="bi bi-calendar3-event me-2 text-warning"></i>竞赛时间：{{ pk.pkBeginDateTimeStr }}-{{ pk.pkEndDateTimeStr }}
                                            </li>
                                        </ul>
                                    </div>
                                    <div class="col-auto">
                                        <div class="bg-light p-2 rounded-0">
                                            <el-button type="primary" plain icon="el-icon-s-order" class="rounded-0 p-4" v-on:click.stop="btnViewClick(pk.id)">赛 程</el-button>
                                        </div>
                                    </div>
                                </div>
                            </el-card>
                        </div>
                        <div class="my-5 text-center me-5">
                            <el-button icon="el-icon-refresh-right" v-if="list.length>0 && list.length<total" v-on:click="btnLoadMoreClick" :loading="loadMoreLoading">加载更多</el-button>
                            <small v-else>没有更多了</small>
                        </div>
                    </div>
                    <div class="pt-10" v-else>
                        <el-empty :image-size="55" image="/sitefiles/assets/images/jiangbei.svg" description="暂无赛事"></el-empty>
                    </div>
                </el-scrollbar>
            </div>
        </el-col>

    </el-row>
</el-card>
@section Scripts{
    <script src="/sitefiles/assets/js/home/exam/examPk.js" type="text/javascript"></script>
}